<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工基本信息维护</title>
	<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<style>
	th, tbody {
		text-align: center;
	}
	#error-add,#success-add,
	#delete-success,#delete-error,
	#update-success,#update-error{
		padding-top: 150px;
		margin: 0px auto;
		width: 150px;
	}
</style>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-10 column">
				<button id="modal-988132" href="#modal-container-988132" data-toggle="modal" role="button" type="button" class="btn btn-primary">增加</button>

				<button id="delete-checked" type="button" class="btn btn-danger">
					删除
				</button>

				<!--
                    	作者：offline
                    	时间：2017-05-31
                    	描述：隐藏增加的界面
                    -->
				<div class="modal fade" id="modal-container-988132" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<form class="form-horizontal" role="form" action="" method="post">
								<div class="form-group" style="margin-top: 20px;">
									<label for="inputEmail3" class="col-sm-2 control-label">手机号码</label>
									<div class="col-sm-7">
										<input type="text" name="empPhone" class="form-control" placeholder="手机号码" />
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">密码</label>
									<div class="col-sm-7">
										<input type="password" name="empPassword" class="form-control" placeholder="密码" />
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
									<div class="col-sm-7">
										<label style="padding-top: 5px;"> 
											<input type="radio" name="empSex" value="1001001" checked>男 
											<input type="radio" name="empSex" value="1001002" checked>女
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">爱好</label>
									<div class="col-sm-7">
										<label style="padding-top: 5px;" id="hobbysId"> 
											
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">所属部门</label>
									<div class="col-sm-7">
										<select id="deptId" class="selectpicker show-tick form-control" multiple-data-live-search="false">
                                        
                                		</select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">备注</label>
									<div class="col-sm-7">
										<textarea class="form-control" name="empRemarks" rows="3"></textarea>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" data-dismiss="modal" id="empAdd">保存</button>
								</div>
							</form>
						</div>

					</div>
				</div>


				<!-- 这是修改页面,默认隐藏 -->
				<div class="modal fade" id="update" role="dialog">
					<div class="modal-dialog">
						<div class="modal-content">
							<form class="form-horizontal" role="form" action="" method="post">
								<div class="form-group" style="margin-top: 20px;">
									<label for="inputEmail3" class="col-sm-2 control-label">手机号码</label>
									<div class="col-sm-7">
										<input type="text" name="empUpdatePhone" class="form-control" placeholder="手机号码" />
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">密码</label>
									<div class="col-sm-7">
										<input type="password" name="empUpdatePassword" class="form-control" placeholder="密码" />
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
									<div class="col-sm-7">
										<label style="padding-top: 5px;"> 
											<input type="radio" name="empUpdateSex" value="1001001" checked>男 
											<input type="radio" name="empUpdateSex" value="1001002" checked>女
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">爱好</label>
									<div class="col-sm-7">
										<label style="padding-top: 5px;" id="hobbysUpdateId"> 
											
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">所属部门</label>
									<div class="col-sm-7">
										<select id="deptUpdateId" class="selectpicker show-tick form-control" multiple-data-live-search="false">
                                        
                                		</select>
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">备注</label>
									<div class="col-sm-7">
										<textarea class="form-control" name="empUpdateRemarks" rows="3"></textarea>
										<input type="hidden" id="updateEmpId" />
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" data-dismiss="modal" id="updateEmp">保存</button>
								</div>
							</form>
						</div>

					</div>
				</div>


				
				<!-- 这是增加成功的页面，默认隐藏 -->
				<div class="modal fade" id="success-add" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
					<div class="alert alert-success alert-dismissable" id="alert-add">
			            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                &times;
			            </button>
			        	    增加成功
			        </div>
				</div>
				
				<!-- 这是增加失败的页面，默认隐藏 -->
				<div class="modal fade" id="error-add" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="alert alert-danger alert-dismissable" id="alert-add">
			            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                &times;
			            </button>
			        	    增加失败
			        </div>
				</div>
				
				<!-- 这是删除成功的页面，默认隐藏 -->
				<div class="modal fade" id="delete-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="alert alert-success alert-dismissable">
			            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                &times;
			            </button>
			        	    删除成功
			        </div>
				</div>

				<!-- 这是删除失败的页面，默认隐藏 -->
				<div class="modal fade" id="delete-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="alert alert-danger alert-dismissable">
			            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                &times;
			            </button>
			        	    删除失败
			        </div>
				</div>

				<!-- 这是修改成功的页面，默认隐藏 -->
				<div class="modal fade" id="update-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="alert alert-success alert-dismissable">
			            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                &times;
			            </button>
			        	    修改成功
			        </div>
				</div>

				<!-- 这是修改失败的页面，默认隐藏 -->
				<div class="modal fade" id="update-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="alert alert-danger alert-dismissable">
			            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			                &times;
			            </button>
			        	    修改失败
			        </div>
				</div>

				<!--
                    	作者：offline
                    	时间：2017-05-31
                    	描述：表格
                    -->
				<table class="table table-hover table-bordered">
					<thead>
						<tr>
							<th><input id="all-checked" type="checkbox" /></th>
							<th>员工编号</th>
							<th>部门编号</th>
							<th>密码</th>
							<th>性别</th>
							<th>手机号码</th>
							<th>备注</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						
					</tbody>
				</table>
				<ul class="pagination" style="position: absolute;top: 350px;left: 300px;">
					    
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var count = 0;
	$(function(){
		var pageSize = 1;
		var curPage = 5;
		ajax(pageSize,curPage);
		empDept();
		hobbys();
		list_li();
		
		/**
		 * 修改
		 */
		$('#updateEmp').bind('click',function(){
			var list = $('input:checkbox[name="empUpdateHobbys"]:checked');
			var value = "";
			$(list).each(function(index,data){
				if(index == 0){
					value = $(data).val();
				}else{
					value = value + "," +$(data).val();
				}
			});
			$.ajax({
			   type: "POST",
			   url: getPath()+"/employee",
			   data: ({
				   "type":"update",
				   "empId":$('#updateEmpId').val(),
				   "empPhone":$('input[name="empUpdatePhone"]').val(),
				   "empPassword":$('input[name="empUpdatePassword"]').val(),
				   "empSex":$('input[name="empUpdateSex"]').val(),
				   "deptId":$('#deptUpdateId').val(),
				   "empRemarks":$('textarea[name="empUpdateRemarks"]').val(),
				   "empHobbys":value
			   }),
			   success: function(data){
				  var json = JSON.parse(data);
				  var result = json.result;
				  if("success" == result){
					  $('#update-success').modal('show');
				  }else{
					  $('#update-error').modal('show');
				  }
			   }
			});
		});


		/**
		 * 修改填充页面
		 */
		$('body').on('click','td input[type="button"]',function(){
			$.ajax({
			   type: "POST",
			   url: getPath()+"/employee",
			   data: ({
			   	  'type':'findById',
			   	  'empId':this.id,
			   }),
			   success: function(value){
				 var json = JSON.parse(value);
				 $(json.data).each(function(index,data){
				 	$('#updateEmpId').val(data.empId);
				 	$('input[name="empUpdatePhone"]').val(data.empPhone);
				 	$('input[name="empUpdatePassword"]').val(data.empPassword);
				 	var list = $('input[name="empUpdateSex"]');
				 	list.each(function(index,data_){
				 		if(data_.value == data.empSex){
				 			data_.checked = true;
				 		}
				 	});
				 	var optionList = $('#deptUpdateId option');
				 	optionList.each(function(index,data_){
				 		if(data_.value == data.deptId){
				 			$(data_).attr('selected','selected');
				 		}
				 	});

				 	$('textarea[name="empUpdateRemarks"]').text(data.empRemarks);
				 });

				 $(json.hobbiesData).each(function(index,data){
				 	var list = $('#hobbysUpdateId input[name="empUpdateHobbys"]');
				 	list.each(function(index,data_){
				 		if(data_.value == data.valueField){
				 			data_.checked = true;
				 		}
				 	});
				 });
			   }
			});
		});

		/**
		 * 关闭警告框
		 */
		$('.close').bind('click',function(){
			ajax(pageSize,curPage);
		});
		
		/**
		 *	点击全选/全不选
		 */
		$('#all-checked').bind('click',function(){
			if(this.checked){
				$('input[type="checkbox"]').attr('checked','checked');	
			}else{
				$('input[type="checkbox"]').removeAttr('checked');
			}
		});

		/**
		 * 增加员工
		 */
		$('#empAdd').bind('click',function(){
			var list = $('input:checkbox[name="empHobbys"]:checked');
			var value = "";
			$(list).each(function(index,data){
				if(index == 0){
					value = $(data).val();
				}else{
					value = value + "," +$(data).val();
				}
			});
			$.ajax({
			   type: "POST",
			   url: getPath()+"/employee",
			   data: ({
				   "type":"add",
				   "empPhone":$('input[name="empPhone"]').val(),
				   "empPassword":$('input[name="empPassword"]').val(),
				   "empSex":$('input[name="empSex"]:checked').val(),
				   "deptId":$('#deptId').val(),
				   "empRemarks":$('textarea[name="empRemarks"]').val(),
				   "empHobbys":value
			   }),
			   success: function(data){
				  var json = JSON.parse(data);
				  var result = json.result;
				  if("success" == result){
					  $('#success-add').modal('show');
				  }else{
					  $('#error-add').modal('show');
				  }
			   }
			});
		});

		/**
		 * 进行删除
		 */
		$('#delete-checked').bind('click',function(){
			var hiddenList = $('td input[type="checkbox"]:checked');
			var str = "";
			hiddenList.each(function(index,data){
				str = str + data.value + ",";
			});
			str = str.substring(0,str.length-1);

			console.log(str);

			$.ajax({
			   type: "POST",
			   url: getPath()+"/employee",
			   data: ({
			   		"type":"delete",
			   		"empId":str
			   }),
			   success: function(data){
				  var json = JSON.parse(data);
				  var result = json.result;
				  if("success" == result){
					  $('#delete-success').modal('show');
				  }else{
					  $('#delete-error').modal('show');
				  }
				}
			});
		});

		/**
		 * 给分页绑定点击事件
		 */
		$('body').on('click','li a',function(){
			var clickText = this.innerText;

			var class_ = this.parentNode.getAttribute('class');
			if('下一页' == clickText){
				if('previous disabled' != class_){
					var nextli = $('li[class="active"]').next();
					$('li').removeAttr('class');
					pageSize = pageSize + 5;
					curPage = curPage + 5;
					ajax(pageSize,curPage);
					if($(nextli).children('a').first().text() == count){
						$(nextli).attr('class','active');
						$('#endpage').attr('class','previous disabled');
						$('#next').attr('class','previous disabled');
					}else if(clickText != count){
						$(nextli).attr('class','active');
					}else{
						$('#endpage').attr('class','previous disabled');
						$('#next').attr('class','previous disabled');
					}
				}
				
			}else if('上一页' == clickText){
				if('previous disabled' != class_){

					var prevli = $('li[class="active"]').prev();
					$('li').removeAttr('class');
						pageSize = pageSize - 5;
						curPage = curPage - 5;
						ajax(pageSize,curPage);
					if($(prevli).children('a').first().text() == '1'){
						$(prevli).attr('class','active');
						$('#homePage').attr('class','previous disabled');
						$('#last').attr('class','previous disabled');
					}else if(pageSize != 1){
						$(prevli).attr('class','active');
						
					}else{
						$('#homePage').attr('class','previous disabled');
						$('#last').attr('class','previous disabled');
					}
				}
				
			}else if('«' == clickText){
				if('previous disabled' != class_){
					var oneA = $('li a');
					$('li').removeAttr('class');
					$(oneA).each(function(index,data){
						if($(data).text() == '1'){
							$(data).parent().attr('class','active');
						}
					});
					pageSize = 1;
					curPage = 5;
					ajax(pageSize,curPage);
					$('#homePage').attr('class','previous disabled');
					$('#last').attr('class','previous disabled');
					$('#endpage').removeAttr('class');
					$('#next').removeAttr('class');
				}
			}else if('»' == clickText){
				if('previous disabled' != class_){
					var lastA = $('li a');
					$('li').removeAttr('class');
					$(lastA).each(function(index,data){
						if($(data).text() == count){
							$(data).parent().attr('class','active');
						}
					});
				 	curPage = 5 * count;
				 	pageSize = curPage - 4;
				 	ajax(pageSize,curPage);
				 	$('#endpage').attr('class','previous disabled');
					$('#next').attr('class','previous disabled');
					$('#homePage').removeAttr('class');
					$('#last').removeAttr('class');
				}
			}else{
				$('li').removeAttr('class');
				if('1' == clickText){
					pageSize = 1;
					curPage = 5;
					ajax(pageSize,curPage);
					this.parentNode.setAttribute('class','active');
					$('#homePage').attr('class','previous disabled');
					$('#last').attr('class','previous disabled');
				}else if(parseInt(count) == parseInt(clickText)){
					curPage = 5 * clickText;
					pageSize = curPage - 4;
					ajax(pageSize,curPage);
					this.parentNode.setAttribute('class','active');
					$('#endpage').attr('class','previous disabled');
					$('#next').attr('class','previous disabled');
				}else{
					curPage = 5 * clickText;
					pageSize = curPage - 4;
					ajax(pageSize,curPage);
					this.parentNode.setAttribute('class','active');
				}
			}
		});
	});
	
	
	/**
	 * 获取当前项目名
	 */
	function getPath(){
		var pathName=window.document.location.pathname;
		var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
		return projectName;
	}
	
	/**
	 * 爱好动态生成
	 */
	function hobbys(){
		$.ajax({
		   type: "POST",
		   url: getPath()+"/employee",
		   data: "type=empHobby",
		   success: function(data){
			 var jsonObject = JSON.parse(data);
			 $('#hobbysId').empty();
		     $(jsonObject.data).each(function(index,data_){
		    	 var hobby_input = $('<input type="checkbox" name="empHobbys" value='+data_.valueField+'>'+data_.textField+'&nbsp;&nbsp;</input>');
			    $('#hobbysId').append(hobby_input);
		     })

		     $('#hobbysUpdateId').empty();
		     $(jsonObject.data).each(function(index,data_){
		    	 var hobby_input = $('<input type="checkbox" name="empUpdateHobbys" value='+data_.valueField+'>'+data_.textField+'&nbsp;&nbsp;</input>');
			    $('#hobbysUpdateId').append(hobby_input);
		     })
		   }
		});
	}
	
	/**
	 * 员工增加页面部门下拉框
	 */
	function empDept(){
		$.ajax({
		   type: "POST",
		   url: getPath()+"/employee",
		   data: "type=deptQuery",
		   success: function(data){
			 var jsonObject = JSON.parse(data);
			 $('#deptId').empty();
		     $(jsonObject.data).each(function(index,data_){
		     	var option_ = $('<option value='+data_.valueField+'>'+data_.textField+'</option>');
		     	$('#deptId').append(option_);
		     })

			 $('#deptUpdateId').empty();
		     $(jsonObject.data).each(function(index,data_){
		     	var option_ = $('<option value='+data_.valueField+'>'+data_.textField+'</option>');
		     	$('#deptUpdateId').append(option_);
		     })
		   }
		});
	}

	
	/**
	 * 创建分页的方法
	 */
	function list_li(){
		$.ajax({
		   type: "POST",
		   url: getPath()+"/employee",
		   data: "type=query&pageSize=1&curPage=5",
		   success: function(data){
		 	 var jsonObject = JSON.parse(data);
		 	 $('.pagination').empty();
		     $('.pagination').append('<li class="previous disabled" id="homePage"><a href="#">&laquo;</a></li>');
			 $('.pagination').append('<li class="previous disabled" id="last"><a href="#">上一页</a></li>');

		     for(var index=1; index<=jsonObject.count; index++){
		    	 if(index == 1){
		    		 $('.pagination').append('<li class="active"><a href="#">'+index+'</a></li>');    		 
		    	 }else{
			    	 $('.pagination').append('<li><a href="#">'+index+'</a></li>');
		    	 }
		     }
		     $('.pagination').append('<li id="next"><a href="#" >下一页</a></li>');
		     $('.pagination').append('<li id="endpage"><a href="#" >&raquo;</a></li>');

		     if('1' == count){
		     	$('#endpage').attr('class','previous disabled');
				$('#next').attr('class','previous disabled');
		     }
		   }
		});
	}

	/**
	 * 封装ajax重复利用
	 */
	function ajax(pageSize,curPage){
		$.ajax({
		   type: "POST",
		   url: getPath()+"/employee",
		   data: "type=query&pageSize="+pageSize+"&curPage="+curPage,
		   success: function(data){
			 var jsonObject = JSON.parse(data);
			 count = parseInt(jsonObject.count);
			 $('#tbody').empty();
		     $(jsonObject.data).each(function(index,data_){
		     	var tr = $('<tr></tr>');
		     	
				var td1 = $('<td></td>');
				var input_ = $('<input type="checkbox" value='+data_.empId+'>');
				td1.append(input_);
				
				var td2 = $('<td></td>');
				td2.text(data_.empId);
				
				var td3 = $('<td></td>');
				td3.text(data_.deptId);
				
				var td4 = $('<td></td>');
				td4.text(data_.empPassword);
				
				var td5 = $('<td></td>');
				td5.text(data_.empSex);
				
				var td6 = $('<td></td>');
				td6.text(data_.empPhone);
				
				var td7 = $('<td></td>');
				td7.text(data_.empRemarks);
				
				var td8 = $('<td></td>');
				var update = $('<input class="btn btn-success" href="#update" data-toggle="modal" id='+data_.empId+' type="button" value="修改">');
				td8.append(update);
				
				tr.append(td1);
				tr.append(td2);
				tr.append(td3);
				tr.append(td4);
				tr.append(td5);
				tr.append(td6);
				tr.append(td7);
				tr.append(td8);
				
				$('#tbody').append(tr);
				$('#tbody tr:odd').attr('class','info');
		     })
		   }
		});
	}
</script>
</html>
